<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>knowledgeDB</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="elementui/index.css" type="text/css"/>
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
</head>
<style>
    .container>.login_body>.login_ad{
        width: 700px;
        height: 645px;
        overflow: hidden;
        background-image: url('images/2a956aa2dc197b5.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        position: relative;
        text-align: center;
        border-top-right-radius:10px;
        border-bottom-right-radius:10px;
        /*top: 10px;*/
        box-shadow: 0 0 16px 0px rgba(0, 0, 0, 0.35);

        /* height: 100%; */

    }
</style>
<body>
<script type="text/javascript" src="assets/three.min.js"></script>
<script type="text/javascript" src="assets/Detector.js"></script>
<script id="vs" type="x-shader/x-vertex">
			varying vec2 vUv;
			void main() {
				vUv = uv;
				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
			}
</script>

<script id="fs" type="x-shader/x-fragment">
			uniform sampler2D map;
			uniform vec3 fogColor;
			uniform float fogNear;
			uniform float fogFar;
			varying vec2 vUv;
			void main() {
				float depth = gl_FragCoord.z / gl_FragCoord.w;
				float fogFactor = smoothstep( fogNear, fogFar, depth );
				gl_FragColor = texture2D( map, vUv );
				gl_FragColor.w *= pow( gl_FragCoord.z, 20.0 );
				gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );
			}
</script>

<script type="text/javascript" src="js/yunduo.js"></script>

<section style="z-index: 9999;position: absolute;top: 10px;left :20%">
    <div class="container" id="content">
        <div class="login_body l_clear" style="
            /*增加阴影效果*/
            filter: progid:DXImageTransform.Microsoft.Shadow(color=#2b2b2b, direction=120, strength=4);
            -moz-box-shadow: 2px 2px 10px #909090;
            -webkit-box-shadow: 2px 2px 10px #474747;
            box-shadow: 12px 12px 20px #3f3f3f;border-radius: 30px">

            <div class="login_form l_float">
                <div class="login_top">
                    <img src="" alt="" class="">

                    <div class="login_tags b_clear">
                        <span class="top_tag l_float active" onClick="PwdLogin()">新用户注册</span>
                    </div>
                </div>
                <div class="login_con">
                    <!--<form action="" method="POST">-->
                    <form>
                        <div>
                            <label for="user_name">用户名</label>
                            <input type="text" name="" id="user_name"
                                   placeholder="用户名"
                                   v-model="loginDto.username" required="required">
                            <img src="imgs/icons/user.svg">
                            <p class="tips hidden">请检查您的账号</p>
                        </div>
                        <div>
                            <label for="user_pwd">手机号</label>
                            <input type="text" name="" id="user_phone"
                                   placeholder="请输入手机号"
                                   onkeyup=checkPhone()
                                   v-model="loginDto.phoneNumber">
                            <img src="imgs/icons/auth_code.svg">
                            <p class="tips hidden">请检查您的手机号</p>
                        </div>
                        <div>
                            <label for="user_pwd">密码</label>
                            <input type="password" name="" id="user_pwd"
                                   placeholder="请输入账户密码"
                                   v-model="loginDto.password">
                            <img src="imgs/icons/lock.svg">
                            <p class="tips hidden">请检查您的密码</p>
                        </div>

                        <div class="b_clear" style="display: inline-block">
                            <label for="img_code" class="b_clear">验证码</label>
                            <input type="text" name=""
                                   v-model="loginDto.imageCode"
                                   id="img_code"
                                   placeholder="1234"
                                   class="l_float"
                                   maxlength="6">
                            <img style="float: left;display: inline-block" src="imgs/icons/auth_code.svg">
                            <p class="tips hidden">验证码错误</p>
                        </div>
                        <div style="display: inline-block;float: right;left: -110px;top: 75px">
                            <img style="width: 110px;height: 50px" :src="src" @click="refreshCode()">
                        </div>

                        <div class="">
                            <!--<button type="submit" @click="signIn()">登&nbsp;&nbsp;录</button>&nbsp;&nbsp;-->
                            <button style="border-radius: 30px;
                            cursor:pointer;
                            width: 100px;
                            height:40px;
                            background-color: #703eff;
                            color: white;
                            font-size: 15px;
                            border: 0px"
                            type="button" @click="registry()">注&nbsp;&nbsp;册</button>&nbsp;&nbsp;
                            <p class="tips hidden">注册失败，请检查您的账户与密码</p>
                        </div>
                    </form>
                </div>
                <div class="login_otherAccount" style="height: 42px">
                    <span>提示: 可以使用微信号直接注册!</span>
                </div>

            </div>
            <div class="login_ad l_float" id="AdImg">
                <a href="login.html">返回登录</a>
            </div>
        </div>
        <div class="footer">
            <p>knowledge DB © 2090 <a href="#">一位知名的斗皇强者</a></p>
        </div>
    </div>
</section>
<!-- / footer -->
<script src="js/login.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="elementui/index.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

</body>

<script>
    //时间转换
    Date.prototype.toLocaleString = function () {
        return (this.getMonth() + 1) +
            "月" + this.getDate() + "日 " + this.getHours() + "点" + this.getMinutes() + "分";
    };

    window.localStorage.getItem("token");
    //token
    var token = window.localStorage.getItem("token");
</script>
<script>
    new Vue({
        el: "#content",
        data: {
            loginDto: {
                username: null,
                password: null,
                imageCode: null,
                phoneNumber: null
            },
            errMessages: null,
            src: "captcha.jpg"
        },
        methods: {
            //用户注册
            registry() {
                axios.post("/user/login/registry", this.loginDto).then((res) => {
                    if (res.data.flag) {
                        this.open1();
                        window.location.href = "login.html";
                    } else {
                        alert(res.data.message)
                    }
                }).catch((res) => {
                    alert("服务错误")
                });
            },

            isNumber(value) {
                let patrn = /^(-)?\d+(\.\d+)?$/;
                return patrn.exec(value) != null;
            },
            //验证码
            refreshCode() {
                this.src = "captcha.jpg?t=" + $.now();
            },

            //消息提示
            open1() {
                this.$notify({
                    title: '成功',
                    message: '操作成功',
                    type: 'success'
                });
            },
        }
    });

    // 用户输入错误提示
    var inputs = document.getElementsByTagName('input');
    var tips = document.getElementsByClassName('tips');

    function InputNull(a){
        tips[a].classList.add('show');
        tips[a].classList.remove('hidden');
    }
    function InputNoNull(a){
        tips[a].classList.add('hidden');
        tips[a].classList.remove('show');
    }

    var UserName     = inputs[0];
    var UserPhone      = inputs[1];
    var UserPwd     = inputs[2];
    var AuthCode     = inputs[3];

    var UserNameTips = tips[0];
    var UserPhoneTips  = tips[1];
    var UserPwdTips  = tips[2];
    var AuthCodeTips = tips[3];

    //用户名
    UserName.oninput = function () {
        if (UserName.value == '') {
            InputNull(0);
            UserNameTips.innerHTML="请检查用户名，用户名不能为空";
        } else{
            InputNoNull(0);
        }
    };
    UserName.onblur = function () {
        if (UserName.value == '') {
            InputNull(0);
            UserNameTips.innerHTML="请检查用户名，用户名不能为空";

        }
    };

    //手机号
    UserPhone.oninput = function () {
        if (UserName.value == '') {
            InputNull(1);
            UserPhoneTips.innerHTML="请检查手机号，手机号不能为空";
        } else{
            InputNoNull(1);
        }
    };
    UserPhone.onblur = function () {
        if (UserName.value == '') {
            InputNull(1);
            UserPhoneTips.innerHTML="请检查手机号，手机号不能为空";

        }
    };
    //手机号的正则表达式
    function checkPhone(){
        if(!(/^1[3456789]d{9}$/.test(UserPwd.value))){
            UserPwdTips.innerHTML("手机号码有误，请重填");
            return false;
        }
    };

    //密码
    UserPwd.oninput = function () {
        if (UserPwd.value == '') {
            InputNull(2);
            UserPwdTips.innerHTML="请检查您的密码，密码不能为空";
        } else{
            InputNoNull(2);
        }
    };
    UserPwd.onblur = function () {
        if (UserName.value == '') {
            InputNull(2);
            UserNameTips.innerHTML="请检查密码，密码不能为空";

        }
    };

    //验证码
    AuthCode.oninput = function () {
        if (AuthCode.value == '') {
            InputNull(3);
            AuthCodeTips.innerHTML="请检查验证码，验证码不能为空";
        }else{
            InputNoNull(3);
        }
    };
    AuthCode.onblur = function () {
        if (AuthCode.value == '') {
            InputNull(3);
            AuthCodeTips.innerHTML="请检查验证码，验证码不能为空";
        }
    }
</script>
</html>
